<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="部门名称" style="width: 180px">
      <el-input v-model="formInline.departName" placeholder="部门名称" />
    </el-form-item>
    <el-form-item label="部门类型" style="width: 180px">
      <el-select v-model="formInline.departTypeId" placeholder="请选择" clearable>
        <el-option label="生产管理" value="1" />
        <el-option label="销售管理" value="2" />
        <el-option label="财务管理" value="3" />
      </el-select>
    </el-form-item>
    <el-form-item label="部门状态" style="width: 180px">
      <el-select v-model="formInline.departState" placeholder="请选择" clearable>
        <el-option label="启用" value="1" />
        <el-option label="停用" value="2" />
      </el-select>
    </el-form-item>

    <el-form-item>
      <el-button type="success" @click="onSubmit()">查询</el-button>
      <el-button type="danger" @click="Export()">导出部门信息</el-button>
    </el-form-item>
  </el-form>

  <div>
    <div class="app-container">
      <div class="search-container">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="departName" label="部门名称" />
          <el-table-column prop="departTypeId" label="部门类型">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.departTypeId == 1">
                生产管理
              </el-tag>
              <el-tag tyoe="primary" v-if="scope.row.departTypeId == 2">
                销售管理
              </el-tag>
              <el-tag type="warning" v-if="scope.row.departTypeId == 3">
                财务管理
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="departLevel" label="级别" />
          <el-table-column prop="departState" label="部门状态">
            <template #default="scope">
              <el-tag type="success" v-if="scope.row.departState == 1">
                启用
              </el-tag>
              <el-tag type="danger" v-if="scope.row.departState == 2">
                停用
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createName" label="创建人" />
          <el-table-column prop="createTime" label="创建时间">
            <template #default="scope">
              {{ scope.row.createTime.substring(0, 10) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <el-pagination v-model:current-page="formInline.pageIndex" v-model:page-size="formInline.pageSize"
    :page-sizes="[1, 2, 3, 4]" :background="true" layout="total, sizes, prev, pager, next, jumper"
    :total="page.totalCount" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
</template>
<script setup lang="ts">
//引用
import { ref, onMounted, reactive } from "vue";
import PurchaseAPI from "@/api/OrganizationalAdministration/index";
import vendor, { getDepart } from "../../../api/DepartMent/index";

import { ElMessageBox, ElMessage, UploadInstance } from "element-plus";
import AddSupplier from "./addSupplier.vue";
import { useRouter } from "vue-router";

//查询条件
const formInline = reactive<getDepart>({
  pageIndex: 1,
  pageSize: 2,
  departId: 0,
  departName: "",
  departTypeId: null,
  departState: null,
});

const handleSizeChange = (val: number) => {
  formInline.pageSize = val;
  onSubmit();
};
const handleCurrentChange = (val: number) => {
  formInline.pageIndex = val;
  onSubmit();
};

//分页条件
const page = reactive({
  totalCount: 0,
  pageCount: 0,
});

onMounted(() => {
  onSubmit();
  SheepType();
});

const tableData = ref([]);

//显示列表
const onSubmit = () => {
  console.log(formInline);
  console.log(page);
  vendor
    .getDepartList(formInline)

    .then((res: any): any => {
      tableData.value = res.data.data;
      page.totalCount = res.data.totalCount;
      page.pageCount = res.data.pageCount;
    })
    .catch((err: any) => {
      console.log(err);
    });
};

const types = ref([]);
const SheepType = () => {
  vendor
    .SheepType()

    .then((res: any) => {
      types.value = res.data;
    })
    .catch((err: any) => {
      console.log(err);
    });
};

const Export = () => {
  location.href = `https://localhost:14273/api/DepartMent/ExportDepartMent?
departId=${formInline.departId}
&departName=${formInline.departName}
&departState=${formInline.departState}
&departTypeId=${formInline.departTypeId}
&PageIndex=${formInline.pageIndex}
&PageSize=${formInline.pageSize}
`;
};
</script>
